<!-- src/views/AccountDeletion.vue -->
<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">账号注销</h1>
    <Card>
      <CardHeader>
        <CardTitle>注销账号</CardTitle>
      </CardHeader>
      <CardContent>
        <div class="space-y-4">
          <Alert variant="destructive">
            <AlertTitle>警告</AlertTitle>
            <AlertDescription>
              注销账号是不可逆操作，所有与账号相关的数据将被永久删除。请谨慎操作。
            </AlertDescription>
          </Alert>
          <form @submit.prevent="initiateAccountDeletion" class="space-y-4">
            <div>
              <Label for="password">输入密码确认</Label>
              <Input v-model="password" type="password" placeholder="请输入你的账号密码" />
            </div>
            <div class="flex items-center space-x-2">
              <Checkbox v-model="confirmed" id="confirm" />
              <label for="confirm" class="text-sm text-gray-700">
                我已了解账号注销的所有后果，并确认要注销我的账号
              </label>
            </div>
            <Button type="submit" variant="destructive" :disabled="!confirmed || !password">
              确认注销账号
            </Button>
          </form>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent
} from '@/components/ui/card'

import {
  Alert,
  AlertTitle,
  AlertDescription
} from '@/components/ui/alert'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

const password = ref("");
const confirmed = ref(false);

const initiateAccountDeletion = () => {
  if (confirmed.value && password.value) {
    // 在这里添加账号注销的逻辑
    console.log("开始注销账号流程");
    // 可能需要弹出一个最终确认对话框
    if (confirm("你确定要注销你的账号吗？此操作不可逆。")) {
      console.log("执行账号注销");
      // 这里应该调用后端 API 来处理实际的账号注销流程
    }
  }
};
</script>
